<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="${basePath}/css/style.css" rel="stylesheet" type="text/css" />
<link href="${basePath}/css/my.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="${basePath}/css/jquery.validate.css"/>
<script type="text/javascript" src="${basePath}/js/validation/jquery-1.8.3.js"></script>
<script type="text/javascript" src="${basePath}/js/validation/jquery.validate.min.js"></script>
<script type="text/javascript" src="${basePath}/js/validation/messages_zh.js"></script>

<script type="text/javascript">
	$(document).ready(function() {
		
		$(".name22").change(function(){
			var path = "${basePath}";
			var name = $(this).val();
			$.ajax({
				url : path + '/manage/isname',
				type : 'POST', // GET
				async : false, // 或false,是否异步
				data : {
					'name' : name
				},
				timeout : 5000, // 超时时间
				dataType : 'json', // 返回的数据格式：json/xml ml/script/jsonp/text
				success : function(data) {
					$('.name22').next().empty();
					if(data){
						$('.name22').after('<label id="admin-error" class="error" style="color:#008000" for="admin">未注册的用户，可以进行注册</label>');
					}else{
						$('.name22').after('<label id="admin-error" class="error" for="admin">已注册的用户，请查阅</label>');
					}
				},
				error : function(xhr, textStatus) {
					alert('错误' + textStatus);
				}
			});
		});
		
		$(".admin22").change(function(){
			var path = "${basePath}";
			var admin = $(this).val();
			$.ajax({
				url : path + '/manage/isadmin',
				type : 'POST', // GET
				async : false, // 或false,是否异步
				data : {
					'admin' : admin
				},
				timeout : 5000, // 超时时间
				dataType : 'json', // 返回的数据格式：json/xml ml/script/jsonp/text
				success : function(data) {
					$('.admin22').next().empty();
					if(data){
						$('.admin22').after('<label id="admin-error" style="color:#008000" for="admin">未注册的账户，可以进行注册</label>');
					}else{
						$('.admin22').after('<label id="admin-error" for="admin">已注册的账户，请查阅</label>');
					}
				},
				error : function(xhr, textStatus) {
					alert('错误' + textStatus);
				}
			});
		});
		
		$(".click").click(function() {
			$(".tip").fadeIn(200);
		});

		$(".tiptop a").click(function() {
			$(".tip").fadeOut(200);
			$(".tip2").fadeOut(200);
			$(".tip3").fadeOut(200);
			$(".tip4").fadeOut(200);
		});

		$(".sure").click(function() {
			
		});

		$(".cancel").click(function() {
			$(".tip").fadeOut(100);
			$(".tip2").fadeOut(100);
			$(".tip3").fadeOut(200);
			$(".tip4").fadeOut(200);
		});
		
		$("#mainFrom").validate({
			rules:{
				"name" : "required",
				"admin" : "required",
				"password" : {
					required : true,
					digits : true,
					maxlength: 13,
					minlength: 6
				},
				"role" : "required"
			},
			message:{
				
			}
		});
		
		$("#mainFrom2").validate({
			rules:{
				"name" : "required",
				"admin" : "required",
				"password" : {
					required : true,
					digits : true,
					maxlength: 13,
					minlength: 6
				},
				"role" : "required"
			},
			message:{
				
			}
		});
		
	});
	
	function onck(id,name,admin,role) {
		$("#ii").val(id);
		$("#name").val(name);
		$("#admin").val(admin);
		$("#role").val(role);
		$(".tip2").fadeIn(200);
	}
	
	function onck2(id,name,role) {
		$("#id").val(id);
		$("#name2").val(name);
		$("#role2").val(role);
		$(".tip3").fadeIn(200);
	}
	

</script>
</head>
<body>
	<div class="place">
		<span>位置：</span>
		<ul class="placeul">
			<li><a href="#">首页</a></li>
			<li><a href="#">管理员列表</a></li>
		</ul>
	</div>

	<div class="rightinfo">

		<div class="tools">

			<ul class="toolbar">
				<li class="click">
				<span>
					<img src="${basePath}/images/t01.png" />
				</span>添加</li>
			</ul>
		</div>

		<table class="tablelist">
			<thead>
				<tr>
					<th>编号</th>
					<th>姓名</th>
					<th>用户名</th>
					<th>角色</th>
					<th>操作</th>
				</tr>
			</thead>
			<c:forEach items="${list}" var="item" varStatus="s">
				<tr>
					<td>${item.id}</td>
					<td>${item.name}</td>
					<td>${item.admin}</td>
					<td>${item.role}</td>
					<td>
					<a style="color:#00F" href="javascript:void(0)" class="tablelink" onclick="onck2('${item.id}','${item.name}','${item.admin}','${item.role}')">删除</a> 
					<a style="color:#00F" href="javascript:void(0)" class="delete" onclick="onck('${item.id}','${item.name}','${item.admin}')">修改</a>
					</td>
			</c:forEach>
		</table>
		<table class="hovertable" style="width: 1718px;">
		<tr>
			<td align="left" style="border:none;">总记录数:${page.total}&nbsp;&nbsp;&nbsp;每页最大显示：${page.show}</td>
			<td style="border:none;">
			<c:if test="${page.page ne '1'}">
				<a href="${basePath}/manage/list?page=1" style="color:#000">[首页]</a>&nbsp;&nbsp; 
			    <a href="${basePath}/manage/list?page=${page.page-1}" style="color:#000">[上一页]</a>&nbsp;&nbsp;
			</c:if>
			<c:if test="${page.page ne page.totalPage}">
				<a href="${basePath}/manage/list?page=${page.page+1}" style="color:#000">[下一页]</a>&nbsp;&nbsp; 
				<a href="${basePath}/manage/list?page=${page.totalPage}" style="color:#000">[尾页]</a>&nbsp;&nbsp;
			</c:if> 
			</td>
			<td align="right" style="border:none;">第${page.page}/${page.totalPage}页
			</td>
		</tr>
	</table>


		<div class="tip">
			<div class="tiptop">
				<span>添加成员</span><a></a>
			</div>

			<form id="mainFrom" method="post" action="${basePath}/manage/add" class="basic-grey">
				<h1>
					添加一位管理员 <span>添加管理员帐号密码信息</span>
				</h1>
				<input type="hidden" name="page" value="${page.page}"/>
				<label>
					<span>姓名 :</span>
					<input type="text" class="name22" name="name" />
				</label>
				<label>
					<span>帐号 :</span>
					<input type="text" class="admin22" name="admin" />
				</label>
				<label>
					<span>密码 :</span>
					<input type="text" name="password" />
				</label>
				<label>
					<span>角色 :</span>
					<select name="role">
						<option value="营销员">营销员</option>
						<option value="商品管理员">商品管理员</option>
						<option value="管理员">管理员</option>
						<option value="超级管理员">超级管理员</option>
					</select>
				</label>
				<div class="tipbtn">
					<input name="" type="submit" class="sure" value="添加" />&nbsp; <input
						name="" type="button" class="cancel" value="取消" />
				</div>
			</form>
		</div>

		<div class="tip2">
			<div class="tiptop">
				<span>修改管理员信息</span><a></a>
			</div>

			<form id="mainFrom2" method="post" action="${basePath}/manage/update" class="basic-grey" enctype="multipart/form-data">
				<h1>
					修改管理的信息<span>你可以修改该管理员的部分信息</span>
				</h1>
				<input type="hidden" name="page" value="${page.page}"/>
				<input id="ii" type="hidden" name="id"/>
					<label>
						<span>姓名 :</span>
						<input id="name" type="text" name="name"  readonly="true"/>
					</label>
					<label>
						<span>帐号 :</span>
						<input id="admin" type="text" name="admin"  readonly="true"/>
					</label>
					<label>
						<span>密码 :</span>
						<input id="password" type="text" name="password" />
					</label>
					<label>
						<span>角色 :</span>
						<select id="classId" name="role">
							<option value="营销员">营销员</option>
							<option value="商品管理员">商品管理员</option>
							<option value="管理员">管理员</option>
							<option value="超级管理员">超级管理员</option>
						</select>
					</label>
				<div class="tipbtn">
					<input name="" type="submit" class="sure" value="修改" />&nbsp; 
					<input name="" type="button" class="cancel" value="取消" />
				</div>
			</form>
		</div>

		<div class="tip3">
			<div class="tiptop">
				<span>删除管理员</span><a></a>
			</div>

			<form method="post" action="${basePath}/manage/delete" class="basic-grey" enctype="multipart/form-data">
				<h1>
					删除管理员<span>你将删除该管理员的所有信息</span>
				</h1>
				<input id="id" type="hidden" name="id"/>
				<input type="hidden" name="page" value="${page.page}"/>
				<label>
						<span>姓名 :</span>
						<input id="name2" type="text" name="name"  readonly="true"/>
					</label>
					<label>
						<span>角色 :</span>
						<input id="role2" type="text" name="admin"  readonly="true"/>
					</label>
				<div class="tipbtn">
					<input name="" type="submit" class="sure" value="删除" />&nbsp; <input
						name="" type="button" class="cancel" value="取消" />
				</div>
			</form>
		</div>

		<script type="text/javascript">
			$('.tablelist tbody tr:odd').addClass('odd');
		</script>
</body>

</html>
